<template>
	<view>
		<view class="share1" >
			<view class="share_banner" @click="closeShare">
				<text>分享至</text>
				<image  src="@/static/Myimg/Exclamation mark.png" mode=""></image>
			</view>
			<view class="share_banner_list">
				<view class="share_list_first">
					<view class="first_item" v-for="(item,index) in item_list" key="index"
						@click="goFirstPage(item,index)">
						<image :src="item.imgUrl" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="">
					<u-line margin=" 4rpx auto 30rpx" length="360px"></u-line>
				</view>

				<view class="share_list_first">
					<view class="first_item second_item" v-for="(item,index) in second_list" key="index"
						@click="goSecondPage(item,index)">
						<image :src="item.imgUrl" mode=""></image>
						<text>{{item.name}}</text>
					</view>
				</view>
				<view class="">
					<u-line margin=" 4 auto 4rpx" length="360px"></u-line>
				</view>
				<view class="share_list_last">
					<view class="first_item  last_item" v-for="(item,index) in third_list" key="index"
						@click="goLastPage(item,index)">
						<image :src="item.imgUrl" mode=""></image>
						<text>{{item.name}}</text>
					</view>
					</view>
				</view>
			</view>
		</view>

</template>

<script>
	export default {
		name: "share",
		display:true,
		data() {
			return {
				touxiang:require("@/static/Myimg/avatar.jpg"),
				wchatFrignd: require("@/static/Myimg/wchatFriend.jpg"),
				wchatQuan: require("@/static/Myimg/wchatQuan.jpg"),
				QQFriend: require("@/static/Myimg/QQFriend.jpg"),
				QQSpace: require("@/static/Myimg/QQquan.jpg"),
				item_list: [{
						imgUrl: require("static/img/logo.png"),
						name: "耍耍猫咪的日常"

					},
					{
						imgUrl: require("static/Myimg/back.jpg"),
						name: "夏天可定制"

					},
					{

						imgUrl: require("static/img/logo.png"),
						name: "耍耍猫咪的日常"
					},
					{
						imgUrl: require("static/Myimg/back.jpg"),
						name: "夏天可定制"
					},
					{
						imgUrl: require("static/img/logo.png"),
						name: "耍耍猫咪的日常"

					},
					{
						imgUrl: require("static/Myimg/back.jpg"),
						name: "夏天可定制"

					},
					{
						imgUrl: require("static/img/logo.png"),
						name: "耍耍猫咪的日常"

					},
					{
						imgUrl: require("static/Myimg/back.jpg"),
						name: "夏天可定制"
					}


				],
				second_list: [{
						name: "私信好友",
						imgUrl: require("@/static/Myimg/sendMessage.png")
					}, {
						name: "微信好友",
						imgUrl: require("@/static/Myimg/wechat.png")
					},
					{
						name: "朋友圈",
						imgUrl: require("@/static/Myimg/friend.png")
					},
					{
						name: "QQ好友",
						imgUrl: require("@/static/Myimg/QQ.png")
					},
					{
						name: "QQ空间",
						imgUrl: require("@/static/Myimg/QQHome.png")
					}
				],
				third_list: [{
					name: "复制链接",
					imgUrl: require("@/static/Myimg/linkPhoto.png")
				}, {
					name: "我的二维码",
					imgUrl: require("@/static/Myimg/ERWeiMa.png")
				}],
			}
		},
		methods:{
			closeShare(){
		      this.display = false
			},	
			sendUser(){
				
			},
			goFirstPage(item,index){
				console.log(index);
			},
			goSecondPage(item,index){
				console.log(index);
				if(index==0){
					// 私信好友
					uni.navigateTo({
						url:"/pages/My/share/sendMessage?imgUrl="+encodeURIComponent(this.touxiang)
					})
				}else if(index == 1){
					// 分享到微信好友
					uni.navigateTo({
						url: "/pages/My/setImg/shareOther?imgUrl=" + encodeURIComponent(this.wchatFrignd)
					})
				}else if(index == 2){
					// 分享到朋友圈
					uni.navigateTo({
							url: "/pages/My/setImg/shareOther?imgUrl=" + encodeURIComponent(this.wchatQuan)
						
					})
				}else if(index == 3){
					// 分享到QQ朋友
				uni.navigateTo({
					url: "/pages/My/setImg/shareOther?imgUrl=" + encodeURIComponent(this.QQFriend)
				})
				}else if(index == 4){
					// 分享到QQ空间
					uni.navigateTo({
						url: "/pages/My/setImg/shareOther?imgUrl=" + encodeURIComponent(this.QQSpace)
					})
				}
			},
			goLastPage(item,index){
				console.log(index);
				if(index==0){
					uni.navigateTo({
						url:""
					})
				}else if(index == 1){
					uni.navigateTo({
						url:"/pages/My/ERpage"
						//user="+encodeURIComponent(JSON.stringify(this.user))
					})
				}
			}
		}
	}
</script>
<style scoped>
	.share1 {
		width: 100%;
		height: 670rpx;
		background-color: #f5f5f5;
		border-radius: 25rpx 25rpx 0 0;
	}

	.share1 .share_banner {
		width: 100%;
		height: 70rpx;
		border-radius: 25rpx 25rpx 0 0;
		text-align: center;
		color: #bcbcbc;
		position: relative;
	}

	.share1 .share_banner text {
		line-height: 70rpx;
	}

	.share1 .share_banner image {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 20rpx;
		right: 20rpx;
	}

	.share1 .share_banner_list {
		width: 100%;
		height: 400rpx;
	}

	.share1 .share_list_first {
		width: 750rpx;
		height: 180rpx;
		margin-top: 15rpx;
		display: flex;
		justify-content: space-around;
		overflow: auto;
		flex: 1;
		min-width: 0;

	}

	.share_list_last {
		width: 750rpx;
		height: 150rpx;
		margin-top: 35rpx;
		display: flex;
		justify-content: flex-start;
		overflow: auto;
		flex: 1;
		min-width: 0;

	}

	.share1 .share_list_first .first_item {
		width: 100rpx;
		height: 180rpx;
		margin-left: 45rpx;
		flex-shrink: 0;
		overflow: hidden;
	}

	.share1 .share_list_first::-webkit-scrollbar {
		display: none;
		/* 对于Webkit浏览器隐藏滚动条 */
	}

	.share1 .first_item image {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.share1 .first_item text {
		font-size: 22rpx;
		display: block;
		text-align: center;
		color: #7b7b7b;
	}

	.share1 .share_banner_list .second_item {
		width: 100rpx;
		height: 140rpx;
		margin-left: 15rpx;
		flex-shrink: 0;
	}
	.share1 .share_banner_list .last_item {
		width: 120rpx;
		height: 140rpx;
		margin-left: 40rpx;
		flex-shrink: 0;
	}
</style>